<#include "/ftl/admin/common/hnair_layout.html"/>
<@layout page_tab="hnair">
<ol class="breadcrumb">
    <li><a href="${baseUrl!}/admin">首页</a></li>
    <li><a href="${baseUrl!}/admin/hnair">搜索航空</a></li>
</ol>
<form class="form-horizontal" action="${baseUrl!}/admin/hnair/search" method="post">
    <div class="form-group">
        <label for="go_back" class="col-sm-2 control-label">往返</label>
        <div class="col-sm-4">
            <select name="go_back" id="go_back" class="form-control">
                <option value="1" selected="selected">往返</option>
                <option value="0">单程</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label for="go" class="col-sm-2 control-label">出发地</label>
        <div class="col-sm-4">
<!--             <input type="text" class="form-control" id="go" name="go" placeholder="出发"> -->
<!-- 			class="cityinput" -->
            <input type="text" class="form-control"  id="fromcity" name="go" placeholder="出发地">
        </div>
    </div>
    
    <div class="form-group">
        <label for="back" class="col-sm-2 control-label">目的地</label>
        <div class="col-sm-4">
<!--             <input type="text" class="form-control" id="back" name="back" placeholder="返程"> -->
<!-- 			class="cityinput" -->
            <input type="text" class="form-control" id="tocity" name="back" placeholder="目的地">
        </div>
    </div>
    
    <div class="form-group">
    	<label for="date" class="col-sm-2 control-label">航班日期</label>
        
        <div class="col-md-4 col-md-offset-0 demo" id="double">
            <input type="text" id="double-date" class="form-control" name="go_back_date">
            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
        </div>
          
        <div class="col-md-4 col-md-offset-0 demo" id="single" style="display: none">
            <input type="text" id="single-date" class="form-control" name="sigle_date">
            <i class="glyphicon glyphicon-calendar fa fa-calendar"></i>
        </div>
    </div>
    
    <!--  
    <div class="form-group">
        <label for="travel_type" class="col-sm-2 control-label">旅客类型</label>
        <div class="col-sm-4">
            <select name="travel_type" id="travel_type" class="form-control">
                <option value="ADT" selected="selected">ADT</option>
                <option value="CNN">CNN</option>
                <option value="INF">INF</option>
            </select>
        </div>
    </div>
    
    <div class="form-group">
        <label for="age" class="col-sm-2 control-label">年龄</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="age" name="age" placeholder="年龄">
        </div>
    </div>
    -->
    
    <div class="form-group">
        <label for="cabin" class="col-sm-2 control-label">经济舱</label>
        <div class="col-sm-4">
			<input type="checkbox" value="Economy"  checked="checked" name="Economy" >
        </div>
    </div>
    
    <div class="form-group">
        <label for="promotion" class="col-sm-2 control-label">促销代码</label>
        <div class="col-sm-4">
            <input type="text" class="form-control" id="promotion" name="promotion" placeholder="促销代码">
        </div>
    </div>
    
    <div class="form-group">
        <label for="flexible" class="col-sm-2 control-label">灵活搜索</label>
        <div class="col-sm-4">
			<input type="radio" name="flexible" checked value="true">&nbsp;是
			
			&nbsp;
			<input type="radio" name="flexible" value="false" >&nbsp;否
        </div>
    </div>
    
    <div class="form-group">
        <label for="adult" class="col-sm-2 control-label">成人</label>
        <div class="col-sm-1">
			<select class="form-control" style="width: 60px;" name="adult">
				<option  value="1">1</option>
				<option  value="2">2</option>
				<option  value="3">3</option>
				<option  value="4">4</option>
			</select>
		</div>	
		
		  <label for="child" class="col-sm-1 control-label">儿童</label>
	        <div class="col-sm-1">
				<select class="form-control" name="child" style="width: 60px;">
					<option value="0">0</option>
					<option value="1">1</option>
					<option value="2">2</option>
				</select>
			</div>	
			
			 <label for="baby" class="col-sm-1 control-label">婴儿</label>
	        <div class="col-sm-1">
				<select class="form-control" style="width: 60px;" name="baby">
					<option  value="0">0</option>
					<option  value="1">1</option>
				</select>
			</div>	
	</div>
    
      <style type="text/css">
      .demo { position: relative; }
      .demo i {
        position: absolute; bottom: 10px; right: 24px; top: auto; cursor: pointer;
      }
      
      .col-sm-4 {
/*     	width:auto!important; */
		line-height: 38px;
  		height: 30px;
	  }
	  
	  .col-sm-1 {
    	width: 6.333%;
	}
      </style>
    
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-primary">查询</button>
        </div>
    </div>
</form>

<script type="text/javascript">

      $(document).ready(function() {
    	  
    	 if($('#go_back').val() == 0 ){
     		 $('#single').show();
     		 $('#double').hide();
     	 }else{
     		 $('#double').show();
     		 $('#single').hide();
     	 }
    	  
    	 $("#go_back").change(function(){
    		 if($('#go_back').val() == 0 ){
        		 $('#single').show();
        		 $('#double').hide();
        	 }else{
        		 $('#double').show();
        		 $('#single').hide();
        	 }
    	 });
    	 
    	 /**checkbox 样式*/
    	 $('input').iCheck({
 		    checkboxClass: 'icheckbox_square-blue',
 		    radioClass: 'iradio_square-blue',
 		    increaseArea: '30%' // optional
 		  });

        $('#config-text').keyup(function() {
          eval($(this).val());
        });
        
        $('.configurator input, .configurator select').change(function() {
          updateConfig();
        });

        $('.demo i').click(function() {
          $(this).parent().find('input').click();
        });

        $('#startDate').daterangepicker({
          singleDatePicker: true,
          startDate: moment().subtract(6, 'days')
        });

        $('#endDate').daterangepicker({
          singleDatePicker: true,
          startDate: moment()
        });

        updateConfig();

        function updateConfig() {
          var options = {};

          if ($('#singleDatePicker').is(':checked'))
            options.singleDatePicker = true;
          
          if ($('#showDropdowns').is(':checked'))
            options.showDropdowns = true;

          if ($('#showWeekNumbers').is(':checked'))
            options.showWeekNumbers = true;

          if ($('#showISOWeekNumbers').is(':checked'))
            options.showISOWeekNumbers = true;

          if ($('#timePicker').is(':checked'))
            options.timePicker = true;
          
          if ($('#timePicker24Hour').is(':checked'))
            options.timePicker24Hour = true;

          if ($('#timePickerSeconds').is(':checked'))
            options.timePickerSeconds = true;
          
          if ($('#autoApply').is(':checked'))
            options.autoApply = true;

          if ($('#dateLimit').is(':checked'))
            options.dateLimit = { days: 7 };

          if ($('#ranges').is(':checked')) {
            options.ranges = {
              'Today': [moment(), moment()],
              'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
              'Last 7 Days': [moment().subtract(6, 'days'), moment()],
              'Last 30 Days': [moment().subtract(29, 'days'), moment()],
              'This Month': [moment().startOf('month'), moment().endOf('month')],
              'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            };
          }

          if ($('#locale').is(':checked')) {
            options.locale = {
              format: 'MM/DD/YYYY HH:mm',
              separator: ' - ',
              applyLabel: 'Apply',
              cancelLabel: 'Cancel',
              fromLabel: 'From',
              toLabel: 'To',
              customRangeLabel: 'Custom',
              daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr','Sa'],
              monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
              firstDay: 1
            };
          }

          if (!$('#linkedCalendars').is(':checked'))
            options.linkedCalendars = false;

          if (!$('#autoUpdateInput').is(':checked'))
            options.autoUpdateInput = false;

          if ($('#alwaysShowCalendars').is(':checked'))
            options.alwaysShowCalendars = true;

//           if ($('#startDate').val().length) 
//             options.startDate = $('#startDate').val();

//           if ($('#endDate').val().length)
//             options.endDate = $('#endDate').val();
          
//           if ($('#minDate').val().length)
//             options.minDate = $('#minDate').val();

//           if ($('#maxDate').val().length)
//             options.maxDate = $('#maxDate').val();

//           if ($('#opens').val().length && $('#opens').val() != 'right')
//             options.opens = $('#opens').val();

//           if ($('#drops').val().length && $('#drops').val() != 'down')
//             options.drops = $('#drops').val();

//           if ($('#buttonClasses').val().length && $('#buttonClasses').val() != 'btn btn-sm')
//             options.buttonClasses = $('#buttonClasses').val();

//           if ($('#applyClass').val().length && $('#applyClass').val() != 'btn-success')
//             options.applyClass = $('#applyClass').val();

//           if ($('#cancelClass').val().length && $('#cancelClass').val() != 'btn-default')
//             options.cancelClass = $('#cancelClass').val();

//           $('#config-text').val("$('#demo').daterangepicker(" + JSON.stringify(options, null, '    ') + ", function(start, end, label) {\n  console.log(\"New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')\");\n});");

//           	$('#config-demo').daterangepicker(options, function(start, end, label) {
//           		console.log('New date range selected: ' + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD') + ' (predefined range: ' + label + ')');
//           		$('#config-demo').val(start.format('YYYY-MM-DD') + ' - ' + end.format('YYYY-MM-DD'));
          		
//           	});
          	
          	$('#double-date').daterangepicker({
          	    "linkedCalendars": true,
          	    "autoUpdateInput": true
          	}, function(start, end, label) {
          	});
          	
          	$('#single-date').daterangepicker({
          	    "singleDatePicker": true,
          	    "linkedCalendars": true,
          	    "autoUpdateInput": true,
          	}, function(start, end, label) {
          	});
          
        }

      });
      
      
		/* *
       * ---------------------------------------- *
       * 城市选择组件 v1.0
       * Author: VVG
       * QQ: 83816819
       * Mail: mysheller@163.com
       * http://www.cnblogs.com/NNUF/
       * ---------------------------------------- *
       * Date: 2012-07-10
       * ---------------------------------------- *
       * */

      /* *
       * 全局空间 Vcity
       * */
      var Vcity = {};
      /* *
       * 静态方法集
       * @name _m
       * */
      Vcity._m = {
          /* 选择元素 */
          $:function (arg, context) {
              var tagAll, n, eles = [], i, sub = arg.substring(1);
              context = context || document;
              if (typeof arg == 'string') {
                  switch (arg.charAt(0)) {
                      case '#':
                          return document.getElementById(sub);
                          break;
                      case '.':
                          if (context.getElementsByClassName) return context.getElementsByClassName(sub);
                          tagAll = Vcity._m.$('*', context);
                          n = tagAll.length;
                          for (i = 0; i < n; i++) {
                              if (tagAll[i].className.indexOf(sub) > -1) eles.push(tagAll[i]);
                          }
                          return eles;
                          break;
                      default:
                          return context.getElementsByTagName(arg);
                          break;
                  }
              }
          },

          /* 绑定事件 */
          on:function (node, type, handler) {
              node.addEventListener ? node.addEventListener(type, handler, false) : node.attachEvent('on' + type, handler);
          },

          /* 获取事件 */
          getEvent:function(event){
              return event || window.event;
          },

          /* 获取事件目标 */
          getTarget:function(event){
              return event.target || event.srcElement;
          },

          /* 获取元素位置 */
          getPos:function (node) {
              var scrollx = document.documentElement.scrollLeft || document.body.scrollLeft,
                      scrollt = document.documentElement.scrollTop || document.body.scrollTop;
              var pos = node.getBoundingClientRect();
              return {top:pos.top + scrollt, right:pos.right + scrollx, bottom:pos.bottom + scrollt, left:pos.left + scrollx }
          },

          /* 添加样式名 */
          addClass:function (c, node) {
              if(!node)return;
              node.className = Vcity._m.hasClass(c,node) ? node.className : node.className + ' ' + c ;
          },

          /* 移除样式名 */
          removeClass:function (c, node) {
              var reg = new RegExp("(^|\\s+)" + c + "(\\s+|$)", "g");
              if(!Vcity._m.hasClass(c,node))return;
              node.className = reg.test(node.className) ? node.className.replace(reg, '') : node.className;
          },

          /* 是否含有CLASS */
          hasClass:function (c, node) {
              if(!node || !node.className)return false;
              return node.className.indexOf(c)>-1;
          },

          /* 阻止冒泡 */
          stopPropagation:function (event) {
              event = event || window.event;
              event.stopPropagation ? event.stopPropagation() : event.cancelBubble = true;
          },
          /* 去除两端空格 */
          trim:function (str) {
              return str.replace(/^\s+|\s+$/g,'');
          }
      };

      /* 所有城市数据,可以按照格式自行添加（北京|beijing|bj），前16条为热门城市 */

      Vcity.allCity = ['北京|beijing|bj', '杭州|hangzhou|hz', '西安|xian|xa', '海口|haikou|hk', 
                       '南宁|nanning|nn', '三亚|sanya|sy', '重庆|chongqing|cq', '青岛|qingdao|qd',
                       '天津|tianjin|tj', '昆明|kunming|km', '南昌|nanchang|nc', '长沙|changsha|cs',
                       '合肥|hefei|hf', '贵阳|guiyang|gy', '呼和浩特|huhehaote|hhht', '晋江|jinjiang|jj',
                       '兰州|lanzhou|lz', '泸州|luzhou|lz', '临沂|linyi|ly', '绵阳|mianyang|my',
                       "南阳|nanyang|ny", '南通|nantong|nt', '太原|taiyuan|ty', '义乌|yiwu|yw',
                       '榆林|yulin|yl', '银川|yinchuan|yc', '宜昌|yichang|yc', '珠海|zhuhai|zh', 
                       '郑州|zhengzhou|zz', '遵义|zunyi|zy', '毕节|bijie|bj', '济宁|jining|jn', 
                       '揭阳|jieyang|jy', '徐州|xuzhou|xz', '宁波|ningbo|nb', '锦州|jinzhou|jz',
                       '泉州|quanzhou|qz', '包头|baotou|bt', '沈阳|shenyang|sy', '长春|changchun|cc', 
                       '赣州|ganzhou|gz', '温州|wenzhou|wz', '桂林|guilin|gl', '永州|yongzhou|yz', 
                       '连云港|lianyungang|lyg', '安庆|anqing|aq', '大连|dalian|dl'];

      /* 正则表达式 筛选中文城市名、拼音、首字母 */

      Vcity.regEx = /^([\u4E00-\u9FA5\uf900-\ufa2d]+)\|(\w+)\|(\w)\w*$/i;
      Vcity.regExChiese = /([\u4E00-\u9FA5\uf900-\ufa2d]+)/;

      /* *
       * 格式化城市数组为对象oCity，按照a-h,i-p,q-z,hot热门城市分组：
       * {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{i:[1.2.3],j:[1,2,3]},QRSTUVWXYZ:{}}
       * */

      (function () {
          var citys = Vcity.allCity, match, letter,
                  regEx = Vcity.regEx,
                  reg2 = /^[a-h]$/i, reg3 = /^[i-p]$/i, reg4 = /^[q-z]$/i;
          if (!Vcity.oCity) {
              Vcity.oCity = {hot:{},ABCDEFGH:{}, IJKLMNOP:{}, QRSTUVWXYZ:{}};
              //console.log(citys.length);
              for (var i = 0, n = citys.length; i < n; i++) {
                  match = regEx.exec(citys[i]);
                  letter = match[3].toUpperCase();
                  if (reg2.test(letter)) {
                      if (!Vcity.oCity.ABCDEFGH[letter]) Vcity.oCity.ABCDEFGH[letter] = [];
                      Vcity.oCity.ABCDEFGH[letter].push(match[1]);
                  } else if (reg3.test(letter)) {
                      if (!Vcity.oCity.IJKLMNOP[letter]) Vcity.oCity.IJKLMNOP[letter] = [];
                      Vcity.oCity.IJKLMNOP[letter].push(match[1]);
                  } else if (reg4.test(letter)) {
                      if (!Vcity.oCity.QRSTUVWXYZ[letter]) Vcity.oCity.QRSTUVWXYZ[letter] = [];
                      Vcity.oCity.QRSTUVWXYZ[letter].push(match[1]);
                  }
                  /* 热门城市 前16条 */
                  if(i<16){
                      if(!Vcity.oCity.hot['hot']) Vcity.oCity.hot['hot'] = [];
                      Vcity.oCity.hot['hot'].push(match[1]);
                  }
              }
          }
      })();
      /* 城市HTML模板 */
      Vcity._template = [
          '<p class="tip">热门城市(支持汉字/拼音)</p>',
          '<ul>',
          '<li class="on">热门城市</li>',
          '<li>ABCDEFGH</li>',
          '<li>IJKLMNOP</li>',
          '<li>QRSTUVWXYZ</li>',
          '</ul>'
      ];

      /* *
       * 城市控件构造函数
       * @CitySelector
       * */

      Vcity.CitySelector = function () {

      	
          this.initialize.apply(this, arguments);
      };

      Vcity.CitySelector.prototype = {

          constructor:Vcity.CitySelector,

          /* 初始化 */

          initialize :function (options) {
              var input = options.input;
              this.input = Vcity._m.$('#'+ input);
              this.inputEvent();
          },

          /* *
           * @createWarp
           * 创建城市BOX HTML 框架
           * */

          createWarp:function(){

      	
              var inputPos = Vcity._m.getPos(this.input);
              var div = this.rootDiv = document.createElement('div');
              var that = this;

              // 设置DIV阻止冒泡
              Vcity._m.on(this.rootDiv,'click',function(event){
                  Vcity._m.stopPropagation(event);
              });

              // 设置点击文档隐藏弹出的城市选择框
              Vcity._m.on(document, 'click', function (event) {
                  event = Vcity._m.getEvent(event);
                  var target = Vcity._m.getTarget(event);
                  if(target == that.input) return false;
                  //console.log(target.className);
                  if (that.cityBox)Vcity._m.addClass('hide', that.cityBox);
                  if (that.ul)Vcity._m.addClass('hide', that.ul);
                  if(that.myIframe)Vcity._m.addClass('hide',that.myIframe);
              });
              div.className = 'citySelector';
              div.style.position = 'absolute';
              div.style.left = inputPos.left + 'px';
              div.style.top = inputPos.bottom + 'px';
              div.style.zIndex = 999999;

              // 判断是否IE6，如果是IE6需要添加iframe才能遮住SELECT框
              var isIe = (document.all) ? true : false;
              var isIE6 = this.isIE6 = isIe && !window.XMLHttpRequest;
              if(isIE6){
                  var myIframe = this.myIframe =  document.createElement('iframe');
                  myIframe.frameborder = '0';
                  myIframe.src = 'about:blank';
                  myIframe.style.position = 'absolute';
                  myIframe.style.zIndex = '-1';
                  this.rootDiv.appendChild(this.myIframe);
              }

              var childdiv = this.cityBox = document.createElement('div');
              childdiv.className = 'cityBox';
              childdiv.id = 'cityBox';
              childdiv.innerHTML = Vcity._template.join('');
              var hotCity = this.hotCity =  document.createElement('div');
              hotCity.className = 'hotCity';
              childdiv.appendChild(hotCity);
              div.appendChild(childdiv);
              this.createHotCity();
          },

          /* *
           * @createHotCity
           * TAB下面DIV：hot,a-h,i-p,q-z 分类HTML生成，DOM操作
           * {HOT:{hot:[]},ABCDEFGH:{a:[1,2,3],b:[1,2,3]},IJKLMNOP:{},QRSTUVWXYZ:{}}
           **/

          createHotCity:function(){
              var odiv,odl,odt,odd,odda=[],str,key,ckey,sortKey,regEx = Vcity.regEx,
                      oCity = Vcity.oCity;
              for(key in oCity){
                  odiv = this[key] = document.createElement('div');
                  // 先设置全部隐藏hide
                  odiv.className = key + ' ' + 'cityTab hide';
                  sortKey=[];
                  for(ckey in oCity[key]){
                      sortKey.push(ckey);
                      // ckey按照ABCDEDG顺序排序
                      sortKey.sort();
                  }
                  for(var j=0,k = sortKey.length;j<k;j++){
                      odl = document.createElement('dl');
                      odt = document.createElement('dt');
                      odd = document.createElement('dd');
                      odt.innerHTML = sortKey[j] == 'hot'?'&nbsp;':sortKey[j];
                      odda = [];
                      for(var i=0,n=oCity[key][sortKey[j]].length;i<n;i++){
                          str = '<a href="#">' + oCity[key][sortKey[j]][i] + '</a>';
                          odda.push(str);
                      }
                      odd.innerHTML = odda.join('');
                      odl.appendChild(odt);
                      odl.appendChild(odd);
                      odiv.appendChild(odl);
                  }

                  // 移除热门城市的隐藏CSS
                  Vcity._m.removeClass('hide',this.hot);
                  this.hotCity.appendChild(odiv);
              }
              document.body.appendChild(this.rootDiv);
              /* IE6 */
              this.changeIframe();

              this.tabChange();
              this.linkEvent();
          },

          /* *
           *  tab按字母顺序切换
           *  @ tabChange
           * */

          tabChange:function(){
              var lis = Vcity._m.$('li',this.cityBox);
              var divs = Vcity._m.$('div',this.hotCity);
              var that = this;
              for(var i=0,n=lis.length;i<n;i++){
                  lis[i].index = i;
                  lis[i].onclick = function(){
                      for(var j=0;j<n;j++){
                          Vcity._m.removeClass('on',lis[j]);
                          Vcity._m.addClass('hide',divs[j]);
                      }
                      Vcity._m.addClass('on',this);
                      Vcity._m.removeClass('hide',divs[this.index]);
                      /* IE6 改变TAB的时候 改变Iframe 大小*/
                      that.changeIframe();
                  };
              }
          },

          /* *
           * 城市LINK事件
           *  @linkEvent
           * */

          linkEvent:function(){
              var links = Vcity._m.$('a',this.hotCity);
              var that = this;
              for(var i=0,n=links.length;i<n;i++){
                  links[i].onclick = function(){
                      that.input.value = this.innerHTML;
                      Vcity._m.addClass('hide',that.cityBox);
                      /* 点击城市名的时候隐藏myIframe */
                      Vcity._m.addClass('hide',that.myIframe);
                  }
              }
          },

          /* *
           * INPUT城市输入框事件
           * @inputEvent
           * */

          inputEvent:function(){
              var that = this;
              Vcity._m.on(this.input,'click',function(event){
                  event = event || window.event;
                  if(!that.cityBox){
                      that.createWarp();
                  }else if(!!that.cityBox && Vcity._m.hasClass('hide',that.cityBox)){
                      // slideul 不存在或者 slideul存在但是是隐藏的时候 两者不能共存
                      if(!that.ul || (that.ul && Vcity._m.hasClass('hide',that.ul))){
                          Vcity._m.removeClass('hide',that.cityBox);

                          /* IE6 移除iframe 的hide 样式 */
                          //alert('click');
                          Vcity._m.removeClass('hide',that.myIframe);
                          that.changeIframe();
                      }
                  }
              });
              Vcity._m.on(this.input,'focus',function(){
                  that.input.select();
                  if(that.input.value == '出发地') that.input.value = '';
              });
              Vcity._m.on(this.input,'blur',function(){
                  if(that.input.value == '') that.input.value = '';
              });
              Vcity._m.on(this.input,'keyup',function(event){
                  event = event || window.event;
                  var keycode = event.keyCode;
                  Vcity._m.addClass('hide',that.cityBox);
                  that.createUl();

                  /* 移除iframe 的hide 样式 */
                  Vcity._m.removeClass('hide',that.myIframe);

                  // 下拉菜单显示的时候捕捉按键事件
                  if(that.ul && !Vcity._m.hasClass('hide',that.ul) && !that.isEmpty){
                      that.KeyboardEvent(event,keycode);
                  }
              });
          },

          /* *
           * 生成下拉选择列表
           * @ createUl
           * */

          createUl:function () {
              //console.log('createUL');
              var str;
              var value = Vcity._m.trim(this.input.value);
              // 当value不等于空的时候执行
              if (value !== '') {
                  var reg = new RegExp("^" + value + "|\\|" + value, 'gi');
                  // 此处需设置中文输入法也可用onpropertychange
                  var searchResult = [];
                  for (var i = 0, n = Vcity.allCity.length; i < n; i++) {
                      if (reg.test(Vcity.allCity[i])) {
                          var match = Vcity.regEx.exec(Vcity.allCity[i]);
                          if (searchResult.length !== 0) {
                              str = '<li><b class="cityname">' + match[1] + '</b><b class="cityspell">' + match[2] + '</b></li>';
                          } else {
                              str = '<li class="on"><b class="cityname">' + match[1] + '</b><b class="cityspell">' + match[2] + '</b></li>';
                          }
                          searchResult.push(str);
                      }
                  }
                  this.isEmpty = false;
                  // 如果搜索数据为空
                  if (searchResult.length == 0) {
                      this.isEmpty = true;
                      str = '<li class="empty">对不起，没有找到数据 "<em>' + value + '</em>"</li>';
                      searchResult.push(str);
                  }
                  // 如果slideul不存在则添加ul
                  if (!this.ul) {
                      var ul = this.ul = document.createElement('ul');
                      ul.className = 'cityslide';
                      this.rootDiv && this.rootDiv.appendChild(ul);
                      // 记录按键次数，方向键
                      this.count = 0;
                  } else if (this.ul && Vcity._m.hasClass('hide', this.ul)) {
                      this.count = 0;
                      Vcity._m.removeClass('hide', this.ul);
                  }
                  this.ul.innerHTML = searchResult.join('');

                  /* IE6 */
                  this.changeIframe();

                  // 绑定Li事件
                  this.liEvent();
              }else{
                  Vcity._m.addClass('hide',this.ul);
                  Vcity._m.removeClass('hide',this.cityBox);

                  Vcity._m.removeClass('hide',this.myIframe);

                  this.changeIframe();
              }
          },

          /* IE6的改变遮罩SELECT 的 IFRAME尺寸大小 */
          changeIframe:function(){
              if(!this.isIE6)return;
              this.myIframe.style.width = this.rootDiv.offsetWidth + 'px';
              this.myIframe.style.height = this.rootDiv.offsetHeight + 'px';
          },

          /* *
           * 特定键盘事件，上、下、Enter键
           * @ KeyboardEvent
           * */

          KeyboardEvent:function(event,keycode){
              var lis = Vcity._m.$('li',this.ul);
              var len = lis.length;
              switch(keycode){
                  case 40: //向下箭头↓
                      this.count++;
                      if(this.count > len-1) this.count = 0;
                      for(var i=0;i<len;i++){
                          Vcity._m.removeClass('on',lis[i]);
                      }
                      Vcity._m.addClass('on',lis[this.count]);
                      break;
                  case 38: //向上箭头↑
                      this.count--;
                      if(this.count<0) this.count = len-1;
                      for(i=0;i<len;i++){
                          Vcity._m.removeClass('on',lis[i]);
                      }
                      Vcity._m.addClass('on',lis[this.count]);
                      break;
                  case 13: // enter键
                      this.input.value = Vcity.regExChiese.exec(lis[this.count].innerHTML)[0];
                      Vcity._m.addClass('hide',this.ul);
                      Vcity._m.addClass('hide',this.ul);
                      /* IE6 */
                      Vcity._m.addClass('hide',this.myIframe);
                      break;
                  default:
                      break;
              }
          },

          /* *
           * 下拉列表的li事件
           * @ liEvent
           * */

          liEvent:function(){
              var that = this;
              var lis = Vcity._m.$('li',this.ul);
              for(var i = 0,n = lis.length;i < n;i++){
                  Vcity._m.on(lis[i],'click',function(event){
                      event = Vcity._m.getEvent(event);
                      var target = Vcity._m.getTarget(event);
                      that.input.value = Vcity.regExChiese.exec(target.innerHTML)[0];
                      Vcity._m.addClass('hide',that.ul);
                      /* IE6 下拉菜单点击事件 */
                      Vcity._m.addClass('hide',that.myIframe);
                  });
                  Vcity._m.on(lis[i],'mouseover',function(event){
                      event = Vcity._m.getEvent(event);
                      var target = Vcity._m.getTarget(event);
                      Vcity._m.addClass('on',target);
                  });
                  Vcity._m.on(lis[i],'mouseout',function(event){
                      event = Vcity._m.getEvent(event);
                      var target = Vcity._m.getTarget(event);
                      Vcity._m.removeClass('on',target);
                  })
              }
          }
      };
          var test=new Vcity.CitySelector({input:'fromcity'});
          var test2=new Vcity.CitySelector({input:'tocity'});
      </script>




</@layout>